<template>
  <div class="screen-top-left2">
    <div class="screen-top-header flex-l">
      <div class="header-left flex-c">
        <i class="iconfont icon-layer-group" />
      </div>
      <div class="header-right flex-l">
        <span class="header-title">各专业分布</span>
        <dv-decoration-1 class="dv-dec-1" />
      </div>
    </div>
    <div class="screen-top-chart">
      <Chart :chart-data="chartData"></Chart>
    </div>
  </div>
</template>

<script setup lang="ts">
import Chart from "./chart/index.vue";
import { reactive } from "vue";
const chartData = reactive([
  {
    value: 20,
    name: "Perfect",
    title: {
      offsetCenter: ["0%", "-30%"],
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ["0%", "-20%"],
    },
  },
  {
    value: 40,
    name: "Good",
    title: {
      offsetCenter: ["0%", "0%"],
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ["0%", "10%"],
    },
  },
  {
    value: 60,
    name: "Commonly",
    title: {
      offsetCenter: ["0%", "30%"],
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ["0%", "40%"],
    },
  },
]);
</script>

<style lang="scss" scoped>
@import "@/assets/scss/common/variables.scss";

.screen-top-left2 {
  height: $box-height2;
  // width: $box-width2;
  background-color: $theme-sub-color;
  margin: 5px;
  border-radius: 10px;

  .screen-top-header {
    height: $chart-header-height;

    .header-left {
      width: 30px;
    }

    .header-right {
      width: calc(100% - 30px);

      .header-title {
        color: #fff;
        font-size: $sm-font-size;
      }

      .dv-dec-1 {
        width: 50px;
        height: 20px;
        margin-left: 10px;
      }
    }
  }
}
</style>
